<template>
	<view class="container">
		<!-- 顶部蓝色头部 -->
		<view class="header-top">
			<view class="header-content">
				<text class="header-back cuIcon-back" @click="goBack"></text>
				<text class="header-title">{{ corpCode }}-ASN入库</text>
			</view>

			<!-- 搜索栏 -->
			<view class="search-bar">
				<view class="search-input-wrapper">
					<text class="cuIcon-search"></text>
					<input @confirm="sub" v-model="searchKeyword" type="text" placeholder="扫描输入ASN过滤"  :focus="focus" />
				</view>
			<view class="filter-btn" @click="toFilter">筛选</view>
		</view>

			<!-- 收料点选择 -->
			<view class="warehouse-select">
				<text class="warehouse-label">收料点：</text>
				<!-- <picker @change="PickerChange" :value="warehouseIndex" :range="warehouseArray">
					<view class="warehouse-picker">
						{{warehouseIndex == -1 ? "全部" : warehouseArray[warehouseIndex]}}
						<text class="cuIcon-down"></text>
					</view>
				</picker> -->
				<view class="bg-white">
						<js-select v-model="query.receivePoint" dict-type="inv_receive_point" placeholder="请选择"
							clearable></js-select>
				</view>
			</view>
		</view>

		<!-- 与 codeandwh/list.vue 保持一致的右侧筛选弹层 -->
		<u-popup :zIndex="99999" v-model="showFilter" mode="right" length="90%">
			<view style="font-size: 18px;border-bottom: 1px solid #aaa;font-weight: bold;padding: 10px;display: flex;justify-content: space-between;">
				<text class=" padding-left-sm" style="color: #3E97B0;">筛选</text>
				<text @click="showFilter=false">关闭</text>
			</view>
			<view class="cu-item shadow ">
				<view class="cu-form-group">
					<view class="title1">供应商：</view>
					<view style="flex: 1;"> <input placeholder="请输入" v-model="filter.supplier" type="text" maxlength="200" /></view>
				</view>
				<view class="cu-form-group">
					<view class="title1">到货日期：</view>
					<view style="flex: 1;"> <input placeholder="请输入" v-model="filter.arrivalDate" type="text" maxlength="200" /></view>
				</view>
				<view class="cu-form-group">
					<view class="title1">批次：</view>
					<view style="flex: 1;"> <input placeholder="请输入" v-model="filter.batchNo" type="text" maxlength="200" /></view>
				</view>
				<view class="cu-form-group">
					<view class="title1">仓库：</view>
					<view style="flex: 1;"> <input placeholder="请输入" v-model="filter.warehouse" type="text" maxlength="200" /></view>
				</view>
				<view class="cu-form-group">
					<view class="title1">数量：</view>
					<view style="flex: 1;"> <input placeholder="请输入" v-model.number="filter.qty" type="number" /></view>
				</view>
				<view class="cu-form-group">
					<view class="title1">存货名称：</view>
					<view style="flex: 1;"> <input placeholder="请输入" v-model="filter.invName" type="text" maxlength="200" /></view>
				</view>
				<view class="cu-form-group">
					<view class="title1">存货编码：</view>
					<view style="flex: 1;"> <input placeholder="请输入" v-model="filter.invCode" type="text" maxlength="200" /></view>
				</view>
			</view>

			<view class=" flex cu-bar tabbar bg-white foot cu-modal-footer">
				<button class="cu-btn  lines-red lg " @click="resetFilter">重置</button>
				<button class="cu-btn  bg-confirm lg margin-left " @click="submitFilter">查询</button>
			</view>
		</u-popup>

		<!-- 标签页 -->
		<view class="tab-container">
			<view class="tab-item" :class="{active: activeTab === 'qualified'}" @click="switchTab('qualified')">
				合格
			</view>
			<view class="tab-item" :class="{active: activeTab === 'unqualified'}" @click="switchTab('unqualified')">
				不合格
			</view>
		</view>

		<!-- 滚动列表 -->
		<scroll-view scroll-y="true" @scrolltolower="loadMore" :scrolltolower-enabled="true" class="scroll-view-class">
			<view class="scroll-content" style="padding-bottom: 80px;">
				<block v-for="(item) in filterList" :key="item.id">
					<view class="item-card">
						<!-- 标题行 - 无左边框 -->
						<view class="item-header">
							<view class="item-title-content">
								<view class="item-title-main">
									<text class="item-code">{{item.cinvcode}}</text>
									<text class="item-separator">·</text>
									<text class="item-name">{{item.cinvname}}</text>
								</view>
								<!-- 右侧角标 - 列排列 -->
								<view class="item-tags-column">
									<view v-if="item.bsamplePart === 1" class="tag tag-sample">样</view>
									<view v-if="item.burgent === 1" class="tag tag-urgent">急</view>
									<view v-if="item.bexemptInspection === 1" class="tag tag-exempt">免</view>
								</view>
							</view>
						</view>

						<!-- 供应商行 - 虚线底部 -->
						<view class="info-row info-row-dashed">
							<text class="info-label">供应商：</text>
							<text class="info-value">{{item.cvenname}}</text>
							<!-- 右侧角标占位 - 与标题对齐 -->
							<!-- <view class="item-tags-column-placeholder">
								<view v-if="activeTab === 'qualified'" class="tag tag-qualified">合</view>
								<view v-if="activeTab === 'unqualified'" class="tag tag-unqualified">不</view>
							</view> -->
						</view>

						<!-- 到货日期行 - 虚线底部 -->
						 <view class="info-row info-row-dashed">
							<text class="info-label">仓库：</text>
							<text class="info-value info-highlight">{{item.cwhname}}</text>
						</view>
						<view class="info-row info-row-dashed">
							<text class="info-label">产品：</text>
							<text class="info-value info-highlight">{{item.cproductcode}}</text>
						</view>
						

						<!-- 产品信息区域 - 左边框 -->
						<view class="item-info-with-border">
							
							<view class="info-row">
								<text class="info-label">数量：</text>
								<text class="info-value">{{item.iqty}}</text>
							</view>
							<view class="info-row">
								<text class="info-label">批次：</text>
								<text class="info-value">{{item.cbatchno}}</text>
							</view>
							<view class="info-row">
								<text class="info-label">规格：</text>
								<text class="info-value">{{item.cinvstd}}</text>
							</view>
							<view class="info-row">
							<text class="info-label">到货日期：</text>
							<text class="info-value">{{item.darrivedate}}</text>
						</view>
						</view>

						<!-- 数量输入行 -->
						<view class="qty-row">
							<text class="qty-label">数量：</text>
							<view class="qty-input-wrapper">
								<input v-model="item.arriveQty" type="number" placeholder="0" class="qty-input" />
							</view>
						</view>

						<!-- 入库按钮 -->
						<view class="item-action">
							<!--  @click="toggleItemCheck(item)" -->
							<view class="checkbox-wrapper">
								<checkbox :checked="item.checked" @click.stop="toggleItemCheck(item)" />
							</view>
							<button class="btn-inbound" @click="handleSingleInbound(item)">入库</button>
						</view>
					</view>
				</block>

				<view v-if="!filterList.length" style="text-align: center;margin-top: 90px; color: #999;">
					暂无数据
				</view>
			</view>
		</scroll-view>

		<!-- 底部固定操作栏 -->
		<view class="batch-action-bar">
			<!-- @click= -->
			<view class="batch-action-left" >
				<checkbox :checked="selectAll" @click.stop="toggleSelectAll"/>
				<text class="select-count-text">已选{{checkedCount}}条</text>
			</view>
			<button class="btn-batch-inbound" @click="batchWarehouse">批量入库</button>
		</view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all">
				<u-button size="mini" @click="handleFocus" type="success"
					style="width: 90px; height: 70px; color: #fff; ">
					<view style="font-size: 16px;display: flex; flex-direction: column;text-align: center;">
						<u-icon style="margin: auto;" name="/static/image/sm1.png" size="80"></u-icon>
						<view>扫一扫</view>
					</view>
				</u-button>
	
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
    import uPopup from "@/uview-ui/components/u-popup/u-popup.vue";
	import JsSelect from "@/components/js-select/js-select.vue";

export default {
    components: { uPopup, JsSelect },
		data() {
			return {
				CustomBar: this.CustomBar,
				searchKeyword: '',
				warehouseIndex: -1,
				warehouseArray: ['全部', '五金', '减震', '五金白胚'],
				activeTab: 'qualified',
				selectAll: false,
				list: [],
				warehouseList: [],
				query: {
					pageNo: 1,
					pageSize: 20,
				},
				loadStatus: "loadmore",
				isLoading: false,
                showFilter: false,
                filter: {
                    supplier: '',
                    arrivalDate: '',
                    batchNo: '',
                    warehouse: '',
                    qty: '',
                    invName: '',
                    invCode: ''
                },
				x: 650, //x坐标
				y: 650, //y坐标
				focus: true,
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'corpCode']),
			filterList() {
				let filtered = this.list;
				if (this.searchKeyword) {
					filtered = filtered.filter(item =>
						item.cinvcode.includes(this.searchKeyword) ||
						item.cinvname.includes(this.searchKeyword)
					);
				}
				// 根据当前标签页过滤
				filtered = filtered.filter(item => {
					if (this.activeTab === 'qualified') {
						return item.status === 'qualified';
					} else {
						return item.status === 'unqualified';
					}
				});
                // 追加筛选条件
                if (this.filter.supplier) {
                    filtered = filtered.filter(item => (item.cvenname || '').includes(this.filter.supplier));
                }
                if (this.filter.arrivalDate) {
                    filtered = filtered.filter(item => (item.darrivedate || '').includes(this.filter.arrivalDate));
                }
                if (this.filter.batchNo) {
                    filtered = filtered.filter(item => (item.cbatchno || '').includes(this.filter.batchNo));
                }
                if (this.filter.warehouse) {
                    filtered = filtered.filter(item => (item.cwhname || '').includes(this.filter.warehouse));
                }
                if (this.filter.qty !== null && this.filter.qty !== undefined && this.filter.qty !== '') {
                    filtered = filtered.filter(item => Number(item.iqty) === Number(this.filter.qty));
                }
                if (this.filter.invName) {
                    filtered = filtered.filter(item => (item.cinvname || '').includes(this.filter.invName));
                }
                if (this.filter.invCode) {
                    filtered = filtered.filter(item => (item.cinvcode || '').includes(this.filter.invCode));
                }
				return filtered;
			},
			checkedCount() {
				return this.filterList.filter(item => item.checked).length;
			}
		},
		onLoad(options) {
			this.query.pageNo = 1;
			this.loadData();
			this.handleFocus();
		},
		methods: {
			handleFocus() {
				this.focus = false;
				setTimeout(() => {
					this.focus = true;
				}, 500);
            },
            toFilter() {
                this.showFilter = true;
            },
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			PickerChange(e) {
				this.warehouseIndex = e.detail.value;
				this.query.pageNo = 1;
				this.list = [];
				this.loadData();
			},
			toScan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						this.searchKeyword = res.result;
						this.query.pageNo = 1;
						this.list = [];
						this.loadData();
					}
				});
			},
			sub() {
				this.query.pageNo = 1;
				this.list = [];
				this.loadData();
			},
			switchTab(tab) {
				this.activeTab = tab;
				// 切换标签页时重置选择状态
				this.selectAll = false;
			},
			toggleItemCheck(item) {
				item.checked = !item.checked;
				// 检查是否全选
				this.selectAll = this.filterList.length > 0 && this.filterList.some(item => item.checked);
				this.$forceUpdate();
			},
			handleSingleInbound(item) {
				if (!item.arriveQty || item.arriveQty <= 0) {
					this.$api.msg('请输入有效数量');
					return;
				}
				this.$api.msg('入库成功');
				// 这里可以调用实际的入库接口
			},
			batchWarehouse() {
				const checkedItems = this.filterList.filter(item => item.checked);
				if (checkedItems.length === 0) {
					this.$api.msg('请至少选择一条数据');
					return;
				}
				// 检查是否所有选中项都有有效数量
				const invalidItems = checkedItems.filter(item => !item.arriveQty || item.arriveQty <= 0);
				if (invalidItems.length > 0) {
					this.$api.msg('请为所有选中项输入有效数量');
					return;
				}
				this.$api.msg(`批量入库 ${checkedItems.length} 条`);
				// 这里可以调用实际的批量入库接口
			},
			toggleSelectAll() {
				this.selectAll = !this.selectAll;
				this.filterList.forEach(item => {
					item.checked = this.selectAll;
				});
				this.$forceUpdate();
			},
			loadMore() {
				// 防止重复加载
				if (this.isLoading || this.loadStatus === "nomore") {
					return;
				}
				this.isLoading = true;
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.pageNo += 1;
					this.loadData("add");
					this.isLoading = false;
				}, 500);
			},
			loadData(type) {
				// 模拟数据
				const mockData = [
					{
						id: Date.now() + Math.random(),
						cinvcode: '五金毛耳',
						cinvname: 'GGASN2509140001',
						cvenname: '华丰',
						darrivedate: '2024-10-24',
						cwhname: 'B-1025/M1/WH-A',
						cproductcode: 'DMC5487412625745',
						iqty: 120,
						cbatchno: 'B-1025/M1/WH-A',
						cinvstd: 'B-1025/M1/WH-A',
						bsamplePart: 1,
						burgent: 0,
						status: 'qualified',
						arriveQty: 120,
						checked: false
					},
					{
						id: Date.now() + Math.random() + 1,
						cinvcode: '五金毛耳',
						cinvname: 'GGASN2509140002',
						cvenname: '华丰',
						darrivedate: '2024-10-24',
						cwhname: 'B-1025/M1/WH-A',
						cproductcode: 'DMC5487412625745',
						iqty: 120,
						cbatchno: 'B-1025/M1/WH-A',
						cinvstd: 'B-1025/M1/WH-A',
						bsamplePart: 0,
						burgent: 1,
						status: 'unqualified',
						arriveQty: 120,
						checked: false
					}
				];

				if (type == "add") {
					// 模拟没有更多数据
					if (this.query.pageNo > 2) {
						this.loadStatus = "nomore";
						return;
					}
					for (let i = 0; i < mockData.length; i++) {
						this.list.push(mockData[i]);
					}
				} else {
					this.list = mockData;
				}
			}
			,
            resetFilter() {
                this.filter = {
                    supplier: '',
                    arrivalDate: '',
                    batchNo: '',
                    warehouse: '',
                    qty: '',
                    invName: '',
                    invCode: ''
                };
            },
            submitFilter() {
                this.showFilter = false;
            }
		}
	};
</script>

<style lang="scss" scoped>
	$all_width: 96rpx;
	$all_height: 96rpx;
	.movable-area {
		z-index: 888;
		height: 97vh;
		width: 650rpx;
		position: fixed;
		right: $all_width;
		top: -($all_height + 70rpx);
		pointer-events: none; //此处要加，鼠标事件可以渗透
	
		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto; //恢复鼠标事件
	
			image {
				width: $all_width;
				height: $all_height;
			}
		}
	}
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #f5f5f5;
	}

	// 顶部蓝色头部
	.header-top {
		background: linear-gradient(135deg, #3E97B0 0%, #2E7A8F 100%);
		padding: 0;
		z-index: 100;

		.header-content {
			display: flex;
			align-items: center;
			padding: 48rpx 30rpx 24rpx 30rpx;
			color: #fff;

			.header-back {
				font-size: 24px;
				margin-right: 12px;
				cursor: pointer;
			}

			.header-title {
				font-size: 16px;
				font-weight: 500;
				flex: 1;
				text-align: center;
			}
		}

		.search-bar {
			display: flex;
			align-items: center;
			padding: 10px 15px;
			// 移动端不支持 flex-gap，使用相邻兄弟选择器实现间距

			.search-input-wrapper {
				flex: 1;
				display: flex;
				align-items: center;
				background: #fff;
				border-radius: 4px;
				padding: 8px 12px;

				text {
					color: #999;
					margin-right: 8px;
				}

				input {
					flex: 1;
					border: none;
					outline: none;
					font-size: 14px;
				}
			}

			.filter-btn {
				background: #0081FF;
				color: #fff;
				padding: 8px 16px;
				border-radius: 4px;
				font-size: 14px;
				font-weight: 500;
			}
		}

		// 相邻兄弟选择器实现 search-bar 子元素水平间距
		.search-bar > * + * {
			margin-left: 10px;
		}

		.warehouse-select {
			display: flex;
			align-items: center;
			padding: 10px 15px;
			gap: 10px;

			.warehouse-label {
				color: #fff;
				font-size: 14px;
			}

			.warehouse-picker {
				background: #fff;
				color: #333;
				padding: 6px 12px;
				border-radius: 4px;
				font-size: 14px;
				display: flex;
				align-items: center;
				gap: 6px;

				text {
					font-size: 12px;
				}
			}
		}
	}

	// 标签页
	.tab-container {
		display: flex;
		background: #fff;
		border-bottom: 1px solid #eee;
		z-index: 99;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 15px 0;
			font-size: 16px;
			color: #999;
			border-bottom: 3px solid transparent;
			cursor: pointer;

			&.active {
				color: #0081FF;
				border-bottom-color: #0081FF;
			}
		}
	}

	// 滚动列表
	.scroll-view-class {
		flex: 1;
		overflow-y: auto;
		padding: 10px 0;
	}

	.scroll-content {
		padding: 0 10px;
	}

	// 商品卡片
	.item-card {
		background: #fff;
		margin-bottom: 10px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		position: relative;

		// 标题行 - 无左边框
		.item-header {
			padding: 12px 15px;
			background: #fff;

			.item-title-content {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.item-title-main {
					flex: 1;
					display: flex;
					align-items: center;
					gap: 4px;

					.item-code {
						font-weight: 600;
						color: #0081FF;
						font-size: 15px;
					}

					.item-separator {
						color: #333;
						font-size: 15px;
					}

					.item-name {
						color: #0081FF;
						font-weight: 600;
						font-size: 15px;
					}
				}

				// 右侧角标 - 列排列
				.item-tags-column {
					display: flex;
					flex-direction: column;
					margin-left: 10px;
					position: absolute;
					right: 15px;
					top: 10px;
				}

				// 移动端不支持 flex-gap，使用相邻兄弟选择器实现间距
				.item-tags-column .tag + .tag {
					margin-top: 20rpx;
				}
			}
		}

		// 信息行样式
		.info-row {
			display: flex;
			padding: 10px 15px;
			font-size: 14px;
			align-items: center;

			.info-label {
				width: 80px;
				color: #666;
				flex-shrink: 0;
			}

			.info-value {
				flex: 1;
				color: #333;

				&.info-highlight {
					color: #0081FF;
				}
			}

			// 虚线底部
			&.info-row-dashed {
				border-bottom: 1px dashed #ddd;
				position: relative;
			}

			// 右侧角标占位
			.item-tags-column-placeholder {
				display: flex;
				flex-direction: column;
				gap: 4px;
				margin-left: 10px;
				position: absolute;
				right: 15px;
				top: 10px;
			}
		}

		// 产品信息区域 - 左边框
		.item-info-with-border {
			border-left: 4px solid #0081FF;
			// margin: 0 15px;
			padding-left: 11px;

			.info-row {
				padding: 8px 0;
				border-bottom: 1px solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.info-label {
					width: 70px;
				}
			}
		}

		// 数量输入行
		.qty-row {
			display: flex;
			align-items: center;
			padding: 12px 15px;
			border-top: 1px solid #f5f5f5;

			.qty-label {
				width: 80px;
				color: #666;
				font-size: 14px;
			}

			.qty-input-wrapper {
				flex: 1;
				display: flex;
				align-items: center;
				border: 1px solid #ddd;
				border-radius: 4px;
				background: #fff;
				padding: 6px 12px;

				.qty-input {
					flex: 1;
					border: none;
					text-align: right;
					font-size: 14px;
					padding: 0;
				}
			}
		}

		// 入库按钮
		.item-action {
			display: flex;
			align-items: center;
			padding: 12px 15px;
			// 移动端不支持 flex-gap，使用相邻兄弟选择器实现间距

			.checkbox-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;

				checkbox {
					transform: scale(1.3);
				}

				// 强制显示 checkbox 选中样式
				/deep/ .uni-checkbox-input {
					border: 2px solid #d1d1d6 !important;
					border-radius: 4px !important;
					width: 22px !important;
					height: 22px !important;
				}

				/deep/ .uni-checkbox-input.uni-checkbox-input-checked {
					background-color: #007aff !important;
					border-color: #007aff !important;
					color: #fff !important;
				}

				/deep/ .uni-checkbox-input.uni-checkbox-input-checked::before {
					color: #fff !important;
					font-size: 16px !important;
				}
			}

			.btn-inbound {
				flex: 1;
				background: #fff;
				border: 1px solid #0081FF;
				color: #0081FF;
				border-radius: 4px;
				font-size: 14px;
				font-weight: 500;
				// padding: 8px 0;
				cursor: pointer;

				&:active {
					background: #f0f8ff;
				}
			}
		}

		// 相邻兄弟选择器实现 item-action 子元素水平间距
		.item-action > * + * {
			margin-left: 10px;
		}
	}

	// 标签样式
	.tag {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 28px;
		height: 28px;
		padding: 0 6px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 600;
		color: #fff;

		&.tag-sample {
			background: #FF9500;
		}

		&.tag-urgent {
			background: #FF3B30;
		}

		&.tag-qualified {
			background: #34C759;
		}

		&.tag-unqualified {
			background: #FF3B30;
		}
	}

	// 底部固定操作栏
	.batch-action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 12px 15px;
		border-top: 1px solid #eee;
		z-index: 99;
		display: flex;
		align-items: center;
		// 移动端不支持 flex-gap
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);

		.batch-action-left {
			display: flex;
			align-items: center;
			// gap: 10px;

			checkbox {
				transform: scale(1.3);
			}

			// 强制显示 checkbox 选中样式
			/deep/ .uni-checkbox-input {
				border: 2px solid #d1d1d6 !important;
				border-radius: 4px !important;
				width: 22px !important;
				height: 22px !important;
			}

			/deep/ .uni-checkbox-input.uni-checkbox-input-checked {
				background-color: #007aff !important;
				border-color: #007aff !important;
				color: #fff !important;
			}

			/deep/ .uni-checkbox-input.uni-checkbox-input-checked::before {
				color: #fff !important;
				font-size: 16px !important;
			}

			.select-count-text {
				font-size: 14px;
				color: #666;
				white-space: nowrap;
			}
		}
		.batch-action-left > * + * {
			margin-left: 10px;
		}

		.btn-batch-inbound {
			flex: 1;
			background: #0081FF;
			color: #fff;
			// padding: 10px 0;
			border-radius: 4px;
			font-size: 16px;
			font-weight: 500;
			border: none;
			cursor: pointer;

			&:active {
				background: #0070e0;
			}
		}
	}
    .bg-confirm {
        background: #3e97b0;
        color: #ffffff;
    }
	.cu-modal-footer{
		padding: 32rpx 32rpx;
		width: 100%;

		.cu-btn {
			width: 50%;
		}
	}
	.bg-white{
		border-radius: 12rpx;
		padding: 0 12rpx;
	}
		// 相邻兄弟选择器实现 batch-action-bar 子元素水平间距
	.batch-action-bar > * + * {
		margin-left: 12px;
	}
</style>


